<!DOCTYPE html>
<html>
<head>
    <title>X-ray Attenuation Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="750" height="520"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        /**
         * Draws an arrow on the canvas context.
         * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
         * @param {number} fromx - The x-coordinate of the start point.
         * @param {number} fromy - The y-coordinate of the start point.
         * @param {number} tox - The x-coordinate of the end point.
         * @param {number} toy - The y-coordinate of the end point.
         * @param {boolean} [bothEnds=false] - If true, draw arrowheads on both ends.
         */
        function drawArrow(ctx, fromx, fromy, tox, toy, bothEnds = false) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);

            // Draw the line
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();

            // Draw arrowhead at the end
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();

            // Draw arrowhead at the start if requested
            if (bothEnds) {
                const startAngle = Math.atan2(fromy - toy, fromx - tox); // reversed angle
                ctx.beginPath();
                ctx.moveTo(fromx, fromy);
                ctx.lineTo(fromx - headlen * Math.cos(startAngle - Math.PI / 6), fromy - headlen * Math.sin(startAngle - Math.PI / 6));
                ctx.moveTo(fromx, fromy);
                ctx.lineTo(fromx - headlen * Math.cos(startAngle + Math.PI / 6), fromy - headlen * Math.sin(startAngle + Math.PI / 6));
                ctx.stroke();
            }
        }

        /**
         * Draws text with a subscript.
         * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
         * @param {string} text - The main text.
         * @param {string} sub - The subscript text.
         * @param {number} x - The x-coordinate of the start of the main text.
         * @param {number} y - The y-coordinate of the baseline of the main text.
         */
        function drawSubscriptText(ctx, text, sub, x, y) {
            const originalFont = ctx.font;
            const originalBaseline = ctx.textBaseline;
            const originalAlign = ctx.textAlign;

            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            
            // Main text (italic)
            ctx.font = 'italic 20px Arial';
            ctx.fillText(text, x, y);
            const textWidth = ctx.measureText(text).width;

            // Subscript (italic)
            ctx.font = 'italic 14px Arial';
            ctx.fillText(sub, x + textWidth -2, y + 4);

            // Restore original settings
            ctx.font = originalFont;
            ctx.textBaseline = originalBaseline;
            ctx.textAlign = originalAlign;
        }

        // --- Main Drawing Logic ---

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        
        // --- Define Geometry ---
        const centerX = 375;
        const centerY = 250;
        const softTissueWidth = 225; // Represents 9.0 cm
        const softTissueHeight = 320;
        const cornerRadius = 25;
        const boneWidth = 75; // Represents 3.0 cm
        const boneHeight = 160;

        const softTissueX = centerX - softTissueWidth / 2;
        const softTissueY = centerY - softTissueHeight / 2;
        const softTissueRightX = softTissueX + softTissueWidth;
        const softTissueBottomY = softTissueY + softTissueHeight;

        // 1. Draw Soft Tissue (rounded rectangle)
        ctx.beginPath();
        ctx.moveTo(softTissueX + cornerRadius, softTissueY);
        ctx.lineTo(softTissueRightX - cornerRadius, softTissueY);
        ctx.arcTo(softTissueRightX, softTissueY, softTissueRightX, softTissueY + cornerRadius, cornerRadius);
        ctx.lineTo(softTissueRightX, softTissueBottomY - cornerRadius);
        ctx.arcTo(softTissueRightX, softTissueBottomY, softTissueRightX - cornerRadius, softTissueBottomY, cornerRadius);
        ctx.lineTo(softTissueX + cornerRadius, softTissueBottomY);
        ctx.arcTo(softTissueX, softTissueBottomY, softTissueX, softTissueBottomY - cornerRadius, cornerRadius);
        ctx.lineTo(softTissueX, softTissueY + cornerRadius);
        ctx.arcTo(softTissueX, softTissueY, softTissueX + cornerRadius, softTissueY, cornerRadius);
        ctx.closePath();
        ctx.stroke();

        // 2. Draw Bone (filled ellipse)
        ctx.beginPath();
        ctx.ellipse(centerX, centerY, boneWidth / 2, boneHeight / 2, 0, 0, 2 * Math.PI);
        ctx.fillStyle = '#cccccc';
        ctx.fill();
        ctx.strokeStyle = 'black';
        ctx.stroke();
        
        // 3. Draw X-ray paths (dashed lines)
        const yC = centerY - 70;
        const yS = centerY + 70;
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(softTissueX, yC);
        ctx.lineTo(softTissueRightX, yC);
        ctx.moveTo(softTissueX, yS);
        ctx.lineTo(softTissueRightX, yS);
        ctx.stroke();
        ctx.setLineDash([]);

        // 4. Draw Incident and Transmitted Rays (arrows)
        const incidentXStart = 40;
        const incidentXEnd = softTissueX - 10;
        const transmittedXStart = softTissueRightX + 10;
        const transmittedXEnd = canvas.width - 40;

        // Incident rays
        drawArrow(ctx, incidentXStart, yC, incidentXEnd, yC);
        drawArrow(ctx, incidentXStart, yS, incidentXEnd, yS);

        // Transmitted rays
        drawArrow(ctx, transmittedXStart, yC, transmittedXEnd, yC);
        drawArrow(ctx, transmittedXStart, yS, transmittedXEnd, yS);

        // 5. Draw Text Labels
        ctx.fillStyle = 'black';
        ctx.font = '16px Arial';

        // Intensity labels
        drawSubscriptText(ctx, 'I', '0', 140, yC);
        drawSubscriptText(ctx, 'I', '0', 140, yS);
        drawSubscriptText(ctx, 'I', 'C', 590, yC);
        drawSubscriptText(ctx, 'I', 'S', 590, yS);

        // Text descriptions
        ctx.textAlign = 'center';
        ctx.fillText('incident', 70, centerY - 10);
        ctx.fillText('intensity', 70, centerY + 10);
        ctx.fillText('transmitted', canvas.width - 80, centerY - 10);
        ctx.fillText('intensity', canvas.width - 80, centerY + 10);

        // Pointer labels
        ctx.textAlign = 'left';
        ctx.fillText('bone', 170, 230);
        ctx.beginPath();
        ctx.moveTo(210, 232);
        ctx.lineTo(centerX - boneWidth/2 - 5, centerY - 30);
        ctx.stroke();
        
        ctx.fillText('soft tissue', 550, 390);
        ctx.beginPath();
        ctx.moveTo(545, 388);
        ctx.lineTo(centerX + 50, centerY + 90);
        ctx.stroke();

        // 6. Draw Dimension Lines
        ctx.textAlign = 'center';

        // Top dimension (bone)
        const dimTopY = softTissueY - 20;
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(centerX - boneWidth / 2, softTissueY);
        ctx.lineTo(centerX - boneWidth / 2, dimTopY - 10);
        ctx.moveTo(centerX + boneWidth / 2, softTissueY);
        ctx.lineTo(centerX + boneWidth / 2, dimTopY - 10);
        ctx.stroke();
        ctx.setLineDash([]);
        drawArrow(ctx, centerX - boneWidth / 2, dimTopY, centerX + boneWidth / 2, dimTopY, true);
        ctx.fillText('3.0 cm', centerX, dimTopY - 15);

        // Bottom dimension (soft tissue)
        const dimBottomY = softTissueBottomY + 30;
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(softTissueX, softTissueBottomY);
        ctx.lineTo(softTissueX, dimBottomY + 10);
        ctx.moveTo(softTissueRightX, softTissueBottomY);
        ctx.lineTo(softTissueRightX, dimBottomY + 10);
        ctx.stroke();
        ctx.setLineDash([]);
        drawArrow(ctx, softTissueX, dimBottomY, softTissueRightX, dimBottomY, true);
        ctx.fillText('9.0 cm', centerX, dimBottomY + 15);

        // Figure label
        ctx.font = 'bold 16px Arial';
        ctx.fillText('Fig. 11.1', centerX, canvas.height - 10);

    </script>
</body>
</html>